import React from 'react';
import { WeaDialog, WeaLocaleProvider, WeaError } from 'ecCom';
import { Button, } from 'antd';
import { observer } from 'mobx-react';
import ModeTab from '.';
import _ from 'lodash';
import {toJS} from 'mobx';
import { listStore } from '../../stores/list';

const getLabel = WeaLocaleProvider.getLabel;

interface TabSetDialogProps{
  Search: listStore;
}

@observer
export class TabSetDialog extends React.Component<TabSetDialogProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      tabid: '',
      tabname: '',
      color: '#000',
      orderid: '',
    }
  }

  closeDoalog = () => {
    const { Search } = this.props;
    Search.tagVisible = false;
  }
  onSave = () => {
    const { Search } = this.props;
    const {treeKey=[],selectRowkeys=[]} = Search;
    let selectTab = this.refs.modetab['wrappedInstance'].state.tags;
    let tabids = '';
    if (selectTab.length <= 0) {
      this.refs.listTagAdd["showError"]();
      return;
    }
    selectTab.map(tab => {
      tabids = tabids + tab.id + ",";
    });
    tabids = tabids.replace(/,$/, '');
    let selectedRowsAllPages = _.uniq(this.props.Search.newTable.selectedRowKeysAllPages.map(d => d.split('_')[0])).join(',');
    let parm = { billids: treeKey.length>0?_.uniq(treeKey.map(d => d.split('_')[0])).join(","):selectRowkeys.length>0? _.uniq(selectRowkeys.map(d => d.split('_')[0])).join(','):selectedRowsAllPages, ids: tabids }
    
    Search.saveTabBatch(parm);
  }

  render() {
    const { Search } = this.props;
    const { iconInfo,treeKey=[],selectRowkeys=[] } = Search;
    let buttons: any = new Array();
    let selectedRowsAllPages = _.uniq(this.props.Search.newTable.selectedRowKeysAllPages.map(d => d.split('_')[0]));
    if(_.compact(treeKey).length>0){
      selectedRowsAllPages =_.compact(_.uniq(toJS(treeKey)).map(d => {
        if(d.indexOf('_')> -1){
          return d.split('_')[0]
        }else{
          return d
        }
      }));
    }
    if(selectRowkeys.length>0){
      selectedRowsAllPages = _.uniq(selectRowkeys.map(d => d.split('_')[0]));
  }
    buttons.push(<Button type="primary" onClick={this.onSave}>{getLabel(86, "保存")}</Button>);
    buttons.push(<Button onClick={this.closeDoalog}>{getLabel(309, "关闭")}</Button>);
    return (
      <div >
        <WeaDialog
          style={{ width: 600, height: 150 }}
          onCancel={ this.closeDoalog}
          iconBgcolor={iconInfo.iconBg || "#96358a"}
          icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
          iconFontColor={iconInfo.iconColor || "#fff"}
          title={getLabel(384962, "批量设置标签")}
          visible={Search.tagVisible}
          buttons={buttons}
        >
          <div style={{ padding: 30 }}>
            <div style={{ height: 20 }}>
              <span style={{ color: 'red', height: 20, lineHeight: '20px', float: 'left' }}>{getLabel('385398', "您已选中")}{selectedRowsAllPages.length}{getLabel(30690, "条数据")}</span>
            </div>
            <div style={{ marginTop: 10 }}>
              <span className="icon-mode-tag" style={{ color: '#757575', display: 'inline-block', float: 'left', marginTop: 10 }}></span>
              <WeaError tipPosition='bottom' error={getLabel(385311, '标签不能为空！')}
                style={{ display: "block" }}
                ref="listTagAdd"
              >
                <ModeTab ref="modetab" container=".wea-dialog" modeid={Search.modeId} billid={''}  />
              </WeaError>
            </div>
          </div>
        </WeaDialog>
      </div>
    )
  }
};